<template>
  <div
    class="message-list-wrapper scroll-box"
    ref="messageWrapper"
    @scroll="scrollFn"
  >
    <ul
      class="message-list"
      ref="msgList"
    >
      <li
        v-for="(item, index) in data"
        :key="item.id"
        @click="openDetail(item, index)"
      >
        <div
          class="item-left system"
          v-if="item.type === 1"
        >
          <i class="iconfont iconxiaoxizhongxin2"></i>
        </div>
        <div
          class="item-left alarm"
          v-if="item.type === 5"
        >
          <i class="iconfont iconyubaojing"></i>
        </div>
        <div
          class="item-left maintainance"
          v-if="item.type === 6"
        >
          <i class="iconfont iconbaoyangtongzhi"></i>
        </div>
        <div
          class="item-left workOrder"
          v-if="item.type === 7"
        >
          <i class="iconfont iconweixiugongdan"></i>
        </div>
        <div class="item-right">
          <div class="item-type-date">
            <span
              class="item-type"
              :class="item.message_status === 0 ? 'unread' : 'color-deep-gray'"
            >{{ handleMsgType(item.type) }}</span>
            <span class="item-date">{{ item.created_date }}</span>
          </div>
          <p
            class="item-content"
            v-html="item.content"
          ></p>
        </div>
      </li>

      <!-- 加载状态 -->
      <div
        class="loading-box"
        v-if="loading"
      >
        <p
          class="finished"
          v-if="finished"
        >没有更多了</p>
        <div
          class="loading"
          v-else
        >
          <van-loading size="14px">加载中...</van-loading>
        </div>
      </div>
    </ul>

    <van-popup v-model="showDetail">
      <div class="detail-box">
        <div class="detail-header">
          <p class="detail-title">{{ messageDetail.title }}</p>
          <p class="detail-platform-date">{{ messageDetail.created_date }}
          </p>
        </div>
        <div
          class="detail-content scroll-box"
          v-html="messageDetail.content"
          @click="jumpFn"
        ></div>
        <ul class="detail-operate-box">
          <li
            class="color-ccc"
            :class="{'color-primary': isShowPrev}"
            @click="prevFn"
          >上一条</li>
          <li
            class="color-ccc"
            :class="{'color-primary': isShowNext}"
            @click="nextFn"
          >下一条</li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup, Loading } from 'vant';
import { getMsgDetail } from '@/api/message.js';

export default {
  name: 'MessageList',
  components: {
    [Popup.name]: Popup,
    [Loading.name]: Loading
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      required: true,
      default: 0
    },
    loading: {
      type: Boolean,
      default: false
    },
    finished: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      showDetail: false,
      messageDetail: {}, //消息详情数据
      isShowPrev: true, //显示上一条
      isShowNext: true, //显示下一条
      detailIndex: '', //详情下标
      currentTypeId: '' //当前类型id
    };
  },
  methods: {
    // 处理消息类型文字
    handleMsgType(type) {
      let typeText = '';
      // 消息类型 1-系统公告 2-预警消息 3-提示消息 4-站内信 5-设备报警 6-保养通知 7-工单消息
      switch (type) {
        case 1:
          typeText = '系统公告';
          break;
        case 2:
          typeText = '预警消息';
          break;
        case 3:
          typeText = '提示消息';
          break;
        case 4:
          typeText = '站内信';
          break;
        case 5:
          typeText = '设备报警';
          break;
        case 6:
          typeText = '保养通知';
          break;
        case 7:
          typeText = '工单消息';
          break;
      }
      return typeText;
    },
    // 滚动事件
    scrollFn(e) {
      let scrollTop = document.querySelector('.message-list-wrapper').scrollTop;
      let clientHeight = document.querySelector('.message-list-wrapper').clientHeight;
      let scrollHeight = document.querySelector('.message-list-wrapper').scrollHeight;

      if (scrollTop + clientHeight >= scrollHeight) {
        this.$emit('scrollBottom');
      }
    },
    // 获取消息详情
    getMsgDetail(id) {
      getMsgDetail({
        id
      }).then(res => {});
    },
    // 显示消息详情
    openDetail(item, index) {
      this.showDetail = true;
      this.messageDetail = item;
      this.detailIndex = index;
      this.getMsgDetail(item.id);
      this.data[this.detailIndex].message_status = 1;

      if (index === 0) {
        this.isShowPrev = false;
      }
      if (index === this.data.length - 1) {
        this.isShowNext = false;
      }
    },
    // 上一条
    prevFn() {
      if (this.detailIndex === 0) {
        return;
      }
      this.detailIndex--;
      this.messageDetail = this.data[this.detailIndex];
      this.getMsgDetail(this.messageDetail.id);
      this.changeBtnFlag();
    },
    // 下一条
    nextFn() {
      if (this.detailIndex === this.data.length - 1) {
        return;
      }
      this.detailIndex++;
      this.messageDetail = this.data[this.detailIndex];
      this.getMsgDetail(this.messageDetail.id);
      this.changeBtnFlag();
    },
    // 修改上/下一条按钮状态
    changeBtnFlag() {
      // 上一条
      if (this.detailIndex > 0) {
        this.isShowPrev = true;
      } else {
        this.isShowPrev = false;
      }
      // 下一条
      if (this.detailIndex < this.data.length - 1) {
        this.isShowNext = true;
      } else {
        this.isShowNext = false;
      }
      this.data[this.detailIndex].message_status = 1;
    },
    // 跳转至工单详情
    jumpFn(e) {
      let id = e.target.dataset.id;
      if (id) {
        // 验证权限
        if (this.$checkBtnPermission('maintenanceCenter:workOrderManage:list:detail')) {
          this.$router.push({
            name: 'workOrderManageDetail',
            query: {
              id
            }
          });
        } else {
          this.$toast(this.$store.state.noDetailPermissionText);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.message-list-wrapper {
  width: 100%;
  height: 100%;

  .message-list {
    width: 100%;
    padding: 0.213333rem 0;

    li {
      display: flex;
      align-items: center;
      margin-bottom: 0.213333rem;
      padding: 0.426667rem;
      background-color: #fff;

      &:last-of-type {
        margin-bottom: 0;
      }

      .item-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.066667rem;
        height: 1.066667rem;
        border-radius: 50%;
        color: #fff;

        &.system {
          background-color: #68d9dd;
        }

        &.alarm {
          background-color: #ff9393;
        }

        &.maintainance {
          background-color: #a597ff;
        }

        &.workOrder {
          background-color: #97e858;
        }

        i {
          font-size: 0.533333rem;
        }
      }

      .item-right {
        flex: 1;
        margin-left: 0.213333rem;

        .item-type-date {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.266667rem;

          .item-type {
            font-size: 0.4rem;

            &.unread {
              position: relative;
              padding-left: 0.266667rem;

              &::before {
                content: '';
                position: absolute;
                top: 31%;
                left: 0;
                width: 0.16rem;
                height: 0.16rem;
                border-radius: 50%;
                background-color: #ff0000;
              }
            }
          }

          .item-date {
            color: var(--color-gray);
            font-size: 0.32rem;
          }
        }

        .item-content {
          line-height: 0.533333rem;
          color: var(--color-deep-gray);
          font-size: 0.346667rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .van-popup {
    display: flex;
    flex-direction: column;
    max-height: 80%;
    border-radius: 0.426667rem;

    .detail-box {
      display: flex;
      flex-direction: column;
      width: 8.32rem;
      height: 100%;
      padding-top: 0.426667rem;
      overflow: hidden;

      .detail-header {
        padding: 0 0.426667rem 0.426667rem;

        .detail-title {
          margin-bottom: 0.266667rem;
          font-size: 0.426667rem;
        }
        .detail-platform-date {
          color: var(--color-gray);
          font-size: 0.32rem;
        }
      }

      .detail-content {
        padding: 0 0.426667rem 0.533333rem;
        line-height: 0.586667rem;
        color: var(--color-deep-gray);
        font-size: 0.373333rem;
      }

      .detail-operate-box {
        flex-shrink: 0;
        display: flex;
        width: 100%;
        height: 1.28rem;
        border-top: 1px solid var(--border-color);

        > li {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50%;
          font-size: 0.426667rem;
          border-right: 1px solid var(--border-color);

          &.color-ccc {
            color: #cccccc;
          }

          &.color-primary {
            color: var(--color-primary);
          }
        }
      }
    }
  }
}
</style>